---
title: Migrating to v5
---

## Package Changes

- Cherry picked imports don't require `/lib`, e.g. `import DropdownList from 'react-widgets/DropdownList';`
- Browser support has been updated to browsers that support 'es modules': safari 10.1+ Chrome 60+ FF 60, Edge 16+
  **no IE support**, you can compile the library further if you need IE or older support.

## Naming Changes

- `valueField` -> `dataKey`

## SelectList has been removed

`SelectList` has always been an awkward component that was half checkbox/radio group,
half listbox component. Checkbox/radio group inputs are actually fairly simple
to build with plain ol react and native inputs, you don't need special focus handling
and mapping values to data is usually app specific. On the other hand RW has never
had a proper Listbox implementation that was public, and may folks hacked the SelectList
to fit that need. So in v5 we've removed SelectList and added `Listbox` input.

## DateTimePicker

The Date picker component has changed it's UX substantially to a single
popup with the calendar, and optionally time input.

Using the picker for both date and time has been soft deprecated (supported but not recommended).
In general, unstructured date and time input is not great UX. We recommend
using two inputs together, instead.

- `DateTimePicker` has been renamed to just `DatePicker` and does not support time values by default
  The `includeTime` can be used to enable time picking

- An experimental `TimeInput` has been added for time only values.
- the `parse` prop only accepts a single format (not an array of formats) or a function

## Filtering differences

In order to simplify and streamline the RW API, we've removed some API niceties
that took up space and added complexity and easier left to the user to implement if needed.

One of these things is for inputs that support filtering: dropdown, multiselect, combobox.
We have removed a few of the built-in filtering options. in particular:

- `caseSensitive`
- `minLength`
- All filter preset values _besides_ 'eq', 'contains', 'startsWith'

These can are all be reimplemented by providing a function for the filter prop:

```jsx
<DropdownList
  filter={(item, searchValue = "") =>
    searchValue.length < 2 ||
    searchValue.startsWith(item.name)
  }
/>
```

## Localizers

With v5, react-widgets comes preconfigured with a localization strategy based on
the built-in browser `Intl` API. If you want to integrate with moment, luxon, etc you still can.

### Breaking Changes

- **Removed browser dist builds:** they are a lot of work to maintain and add very little value now-a-days.
  Please bundle yourself with webpack, parcel, et al.
- **Provider based specification:** Rather than have a bespoke configuration approach for localizers there is now
  a `<Localization>` provider component that accepts a date and/or number localizer,
  and provides them to each widget in the react component tree.
- **Deprecated Globalize localizer:** After many years, the Globalize.js adapter is being
  retired. It's a pain to maintain and usage of Globalize seems to have waned signifantly

## Styling

- Less has been removed replaces fully by Sass.
- Sass builds require Sass modules, which are not implemented in the (now deprecated) node-sass,
  use the`sass` npm package instead

## Typescript support

RW is now fully written in TypeScript and so ships with it's own type defs.
